<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <dc-goods-select v-model="settingData.data.mpliveList" :multiple="true" type="mplive">
        <template #title>
          直播间选择
        </template>
      </dc-goods-select>
      <div class="card">
        <div class="title">直播间样式</div>
        <div class="content">
          <el-form-item label="选择风格">
            <el-radio-group class="custom-radio-button" v-model="settingData.data.mode">
              <el-radio-button :label="1">
                <sa-icon icon="sa-shop-decorate-goodsCard-mode-1" />
              </el-radio-button>
              <el-radio-button :label="2">
                <sa-icon icon="sa-shop-decorate-goodsCard-mode-3" />
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <template v-for="(item, field) in settingData.data.goodsFields" :key="field">
            <template v-if="fieldLabel[field]">
              <el-form-item :label="fieldLabel[field]">
                <dc-color-picker v-model="item.color" v-model:show="item.show" :isShow="true"></dc-color-picker>
              </el-form-item>
            </template>
          </template>
        </div>
      </div>
      <div class="card">
        <div class="title">样式</div>
        <div class="content">
          <el-form-item label="上圆角">
            <dc-slider v-model="settingData.data.borderRadiusTop"></dc-slider>
          </el-form-item>
          <el-form-item label="下圆角">
            <dc-slider v-model="settingData.data.borderRadiusBottom"></dc-slider>
          </el-form-item>
          <el-form-item label="间距">
            <dc-slider v-model="settingData.data.space"></dc-slider>
          </el-form-item>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import dcColorPicker from '../../common/dc-color-picker.vue';
import dcGoodsSelect from '../../common/dc-goods-select.vue';
import dcSlider from '../../common/dc-slider.vue';

const props = defineProps(['settingData', 'tabType']);

const fieldLabel = computed(() => {
  return {
    name: '直播标题',
    anchor_name: '主播昵称',
  };
});
</script>
